<template>
  <view-page>
    <HeaderView />
    <div class="bg"></div>

    <div class="container">
      <div class="header-title">
        <div class="left">
          <span class="material-symbols-outlined">chevron_left</span>
          <span class="text">我的送检</span>
        </div>
      </div>
      <ReportMenus :menus="menus" :showBg="true" />
      <ReportCard :reportList="reportList" />
    </div>

    <CardView />
    <FooterView />
  </view-page>
</template>

<script setup>
import { ref } from 'vue'
// import HeaderView from '@/components/Layout/HeaderView.vue';
import CardView from '@/components/Footer/CardView'
import FooterView from '@/components/Footer/FooterView.vue'
import ReportCard from './ReportCard.vue'
// import  from './UserReportCard.vue';
import ReportMenus from './ReportMenus.vue'

const menus = ref([
  {
    id: 1,
    title: '我的送检',

    icon: 'assignment',
    path: '/mobile/my-submission',
  },
  {
    id: 2,
    title: '我的预约',
    icon: 'event_available',
    path: '/mobile/my-order',
  },
  {
    id: 3,
    title: '报告验伪',
    icon: 'barcode_scanner',
    path: '/mobile/my-report-result',
  },
  {
    id: 4,
    title: '送样单位',
    icon: 'home_work',
    path: '/mobile/my-report-list',
    active: true,
  },
  {
    id: 5,
    title: '地址信息',
    icon: 'pin_drop',
    path: '/mobile/my-report-company',
  },
  { id: 6, title: '个人信息', icon: 'badge', path: '/mobile/user-center' },
])

const reportList = ref([
  {
    id: 1,
    title: '热解有机碳；总有机碳；',
    count: 2,
    status: '默认',
    desc: '油，气 ｜ 邮寄',
    address: '北京石油地质实验研究中心',
    user: '王晓蕾',
    phone: '18615508558',
  },
  {
    id: 2,
    title: '双探头低真空场发射扫描电镜矿物扫描系统',
    count: 2,
    status: '默认',
    desc: 'Apreo,LoVac 30kv',
    address: '北京石油地质实验研究中心',
    user: '王晓蕾',
    phone: '18615508558',
  },
  {
    id: 3,
    title: '热解有机碳；总有机碳；',
    count: 2,
    status: '默认',
    desc: '油，气 ｜ 邮寄',
    address: '北京石油地质实验研究中心',
    user: '王晓蕾',
    phone: '18615508558',
  },
  {
    id: 4,
    title: '热解有机碳；总有机碳；',
    count: 2,
    status: '默认',
    desc: '油，气 ｜ 邮寄',
    address: '北京石油地质实验研究中心',
    user: '王晓蕾',
    phone: '18615508558',
  },
])
</script>

<style scoped lang="scss">
.container {
  position: relative;
  // margin-top: dpi(13rem);
  z-index: 1;
  .header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: dpi(5rem);
    .left {
      display: flex;
      align-items: center;
      color: #fff;
      font-family: swiper-icons;
      text-transform: none !important;
      letter-spacing: 0;
      font-variant: initial;
      line-height: 1;
      .icon {
        &::after {
          font-family: swiper-icons;
          content: 'prev';
        }
      }
      .text {
        margin-left: dpi(4rem);
        font-family: PingFangSC-Semibold;
        font-size: dpi(4rem);
        color: #ffffff;
      }
    }
  }
}
</style>
